<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">模板</section>
      <!-- <a-tabs style="background: #fff; padding: 0px 16px 8px 16px;" :animated="false" v-model="tabs">

<a-tab-pane key="select1" tab="选择一">
</a-tab-pane>
<a-tab-pane key="select2" tab="选择2">
</a-tab-pane>
</a-tabs> -->
      <a-row :gutter="16">

        <a-col :span="8">
          <a-button @click="getEdit" class="mx-8" type="primary">新增</a-button>
        </a-col>
      </a-row>
      <a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll"
        :pagination="pagination">
        <template #status="status, data">
          {{ data.status == 1 ? '成功' : '失败' }}
        </template>
        <template #action="action, data">
          <div class="flex items-center justify-between">
            <a-button @click="getEdit(data)" class="mr-10" type="primary">
              编辑
            </a-button>
            <a-button @click="goCharts(data)" style="background: 	#32CD32;" type="primary">
              查看
            </a-button>
            <a-button @click="delect(data)" class="ml-10 mr-10" type="danger">
              删除
            </a-button>
            <!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
          </div>
        </template>

      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <particulars ref="particulars"></particulars>
    <create @upload="upload" ref="create"></create>
  </a-spin>
</template>
<script>
  import create from './components/create'
  import particulars from './components/particulars'
  import {
    dictget
  } from '@/api/index'
  import {
    tableMixins
  } from '@/utils/mixins'
  export default {
    mixins: [tableMixins],
    components: {
      particulars,
      create
    },
    data() {
      return {
        loading: false,
        tabs: 'select1',
        orderId: undefined,
        ceartTime: [undefined, undefined],
        status: 1,
        orderStatusEnums: [{
            value: 1,
            name: '成功'
          },
          {
            value: 2,
            name: '失败'
          }
        ],
        data: [],
        columns: [{
            title: '字典类型编号',
            dataIndex: 'id',
            align: 'center',
            width: 140,
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '字典名称',
            dataIndex: 'name',
            width: 120,
            align: 'center',
            scopedSlots: {
              customRender: 'name'
            },
          },
          {
            title: '	字典类型',
            dataIndex: 'type',
            width: 120,
            align: 'center',
            scopedSlots: {
              customRender: 'type'
            },
          },
          {
            title: '	备注',
            dataIndex: 'remark',
            width: 120,
            align: 'center',
            scopedSlots: {
              customRender: 'remark'
            },
          },
          {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
            width: 70,
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '操作',
            fixed: 'right',
            dataIndex: 'action',
            width: 160,
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center'
          }
        ],

      }
    },
    computed: {

    },
    watch: {

    },
    async created() {
      this.search()
    },
    methods: {
      search() {
        this.pageNum = 1
        this.getData()
      },
      upload() {
        this.search()
      },
      delect(data) {
        this.$confirm({
          title: '删除',
          content: `请确认是否删除该条信息`,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            console.log('删除')
            return
            this.loading = true
            deductionDetail({
                deductId: data.id
              })
              .then((res) => {
                this.$message.success('删除成功！')

                this.search()

                this.loading = false
              })
              .finally(() => (this.loading = false))

          },
        })
      },
      goCharts(data) {
        this.$refs.particulars.open()
      },
      getEdit(data) {
        this.$refs.create.open(data)
      },
      getSearchParams() {
        console.log(this.vendorId);
        return {
          type: ''
        }
      },
      getData() {
        this.loading = true
        dictget(this.getSearchParams()).then(data => {
          this.total = data.rowCount
          this.data = data.items
        }).finally(() => this.loading = false)
      },
      reset() {
        this.ceartTime = [undefined, undefined]
      }
    }
  }
</script>
<style lang="less" scoped>
  .ant-col {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .label {
      flex-shrink: 0;
      width: 86px;
      text-align: right;
      font-size: 14px;
      color: #595959;
    }

    .w-full {
      flex: 1;
    }
  }
</style>